<template>
	<view class="container bg-white">
		<uni-nav-bar :statusBar='statusBar' style="width: 100%;">
			<view slot="right" class="right">
				<image @click="handClick()" class="image" src="../../static/cancel.png"></image>
			</view>
		</uni-nav-bar>
		<view class="title">
			<view>你好,</view>
			<view>欢迎来到佐佑帮生活服务</view>
		</view>
		<view class="content">
			<view class="phone">
				<input placeholder-class='plac' type="number" v-model="phone" value="" class="text-13 flex-treble"
					placeholder="请输入手机号码" />
				<view class="img" v-if='phone' @click="clear()">
					<image src="../../static/close2.png"></image>
				</view>

			</view>
			<view class="pwd">
				<input placeholder-class='placher' v-model="pwd" type="password" value="" class="text-13 flex-treble"
					placeholder="请输入密码" />

			</view>
			<view class="tab">
				<view @click="toPage('/pages/codeLogin/codeLogin')">验证码登录</view>
				<view>
					<view class="forget" @click="toPage('/pages/forgetPwd/forgetPwd')">忘记密码</view>
					<view class="login" @click="toPage('/pages/regesiter/regesiter')">快速注册</view>
				</view>
			</view>
			<view class="btn" @click="submit">
				登录
			</view>
			<block v-if="platform=='android'">
				<view class="tip" >
					<view class="line"></view>
					<view>更多登录方式</view>
					<view class="line"></view>
				</view>
				<view class="wixin">
					<image  @click="wxlogin()" class="img"
						src="../../static/wx.png">
					</image>
					<!-- <block v-if="system >= 13 && platform=='ios'">
						<image style="margin-left: 20px;" @click="iosLogin" class="img" src="../../static/ios.png"></image>
					</block> -->
				
				</view>
			</block>
			
			


		</view>
		
		<view class="xieyi">
			登录表示已阅读并同意
			<text @click="toPage('/filePage/pages/agreement/agreement?id=1')">《佐佑帮用户协议》</text>
			<text style="color:#999999">和</text>
			<text @click="toPage('/filePage/pages/agreement/agreement?id=2')">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				statusBar: true,
				fixed: true,
				phone: '',
				pwd: '',
				latitude: '',
				longitude: '',
				system: '', // 系统版本
				platform: '', // 平台
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.system = res.system.slice(-4)
					this.platform = res.platform
				},
				fail: (err) => {},
				complete: () => {}
			})
		},
		onShow() {
			// uni.getLocation({
			// 	type: "gcj02",
			// 	success: res => {
			// 		console.log(res)
			// 		this.latitude = res.latitude;
			// 		this.longitude = res.longitude;
			// 	},
			// })
		},
		methods: {

			//ios登陆
			iosLogin() {
				console.log(222)
				uni.login({
					provider: 'apple',
					success: loginRes => {
						uni.getUserInfo({
							provider: 'apple',
							success: userInfoRes => {
								console.log('获取用户信息成功' + JSON.stringify(userInfoRes))
							}
						});
					},
					fail: err => {
						console.log('apple登录失败' + JSON.stringify(err));
					}
				});

			},
			clear() {
				console.log(1111)
				this.phone = ''
			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			handClick() {
				console.log(111)
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			async submit() {
				if (!this.phone) {
					return this.$util.msg('手机号不能为空')
				}
				if (!this.pwd) {
					return this.$util.msg('密码不能为空')
				}
				var CusBase64 = require('@/common/js/base64.js');

				var password = CusBase64.CusBASE64.encoder(this.pwd);
				const data = {
					mobile: this.phone,
					password,
					loginType: 1
				}
				const [err, rs] = await this.$post(this.$api.login, data)
				console.log(rs)
				if (rs) {
					uni.setStorage({
						key: 'userId',
						data: rs.data.id
					})
					uni.switchTab({
						url: '/pages/file/file'
					})
				}
			},
			//第三方微信登陆
			wxlogin() {
			
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res)
						this.latitude = res.latitude
						this.longitude = res.longitude
						uni.showLoading({
							title: '正在登录',
							mask: true,
						})
						uni.getProvider({
							service: 'oauth',
							success: (res) => {
								console.log(res.provider)
								if (res.provider.indexOf('weixin') > -1) {
									console.log(1111)
									uni.login({
										provider: 'weixin',
										success: (loginRes) => {
											console.log(JSON.stringify(loginRes));
										

											if (loginRes.errMsg == "login:ok") {
												// 获取用户信息
												uni.getUserInfo({
													provider: 'weixin',
													success: (infoRes) => {
														console.log(
															infoRes)
														// console.log(infoRes.userInfo); //没有openId
														// console.log('用户昵称为：' + infoRes.userInfo.nickName); //成功
														// console.log('用户ID为：' + infoRes.userInfo.openId); //失败
														const data = {
															openid: loginRes
																.authResult
																.openid,
															unionid: loginRes
																.authResult
																.unionid,
															nickname: infoRes
																.userInfo
																.nickName,
															headimg: infoRes
																.userInfo
																.avatarUrl,
															latitude: this
																.latitude,
															longitude: this
																.longitude,
															loginType: 3,

														}
														console.log(JSON
															.stringify(
																data))
														this.$post(this
																.$api
																.register,
																data)
															.then(res => {
																const [
																	err,
																	rs
																] = res
																console
																	.log(
																		err,
																		rs
																	)
																if (
																	rs
																) {
																	uni.hideLoading()
																	console
																		.log(
																			rs
																			.data
																		)
																	console
																		.log(
																			rs
																			.data
																			.id
																		)
																	uni.setStorage({
																		key: 'userId',
																		data: rs
																			.data
																			.id
																	})
																	uni.setStorage({
																		key: 'openid',
																		data: loginRes.authResult.openid,
																	})
																	if (rs
																		.data
																		.mobile
																	) {
																		uni.switchTab({
																			url: '/pages/home/home'
																		})

																	} else {
																		uni.navigateTo({
																			url: '/pages/regesiter/regesiter?type=2'
																		})
																	}

																}
															})
													}
												});

											}
										},
										fail(res) {
											console.log(res)
										},
										complete(res) {
											console.log(res)
										}
									});
								}
							},
							fail: (error) => {
								console.log('获取登录通道失败', error);
							}
						});
					},
					fail: error => {
						console.log("获取定位失败了", error)
						uni.showModal({
							title: '提示',
							content: '获取定位失败，是否授权打开定位',
							success: (res) => {
								if (res.confirm) {
									uni.getSystemInfo({
										success: (sys) => {
											if (sys.platform == 'ios') {
												plus.runtime.openURL(
													"app-settings://");
											} else {
												var main = plus.android
													.runtimeMainActivity();
												var Intent = plus.android.importClass(
													"android.content.Intent");
												//可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
												var mIntent = new Intent(
													'android.settings.LOCATION_SOURCE_SETTINGS'
												);
												main.startActivity(mIntent);
											}
										}
									})
								}
							}
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.container {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;

		.right {
			display: flex;
			justify-content: center;
			align-items: center;

			.image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.title {

			padding-left: 66rpx;
			padding-right: 93rpx;
			margin-top: 70rpx;
			font-size: 52rpx;
			font-weight: bold;
			color: #181818;

		}

		.content {
			padding-left: 63rpx;
			padding-right: 66rpx;
			margin-top: 123rpx;

			.phone,
			.pwd {
				padding-bottom: 24rpx;
				border-bottom: 1px solid #ED7200;
				display: flex;
				justify-content: space-between;
				position: relative;

				.img {
					position: absolute;
					width: 64rpx;
					height: 64rpx;
					right: 0;
					text-align: center;
					line-height: 64rpx;
					z-index: 99;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}

				input {
					font-weight: bold;
					color: #181818;
					background: transparent;
					font-size: 34rpx;
				}


			}

			.pwd {
				margin-top: 65rpx;
				border-bottom: 1px solid #D9D9D9;
			}
		}




	}

	.plac {
		font-weight: normal;
	}

	.placher {
		font-weight: normal;
		color: #D9D9D9;
	}

	.tab {
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;

		>view {
			display: flex;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #888888;
		}

		.forget {
			margin-right: 30rpx;
		}
	}

	.btn {
		height: 94rpx;
		background: #ED7200;
		opacity: 0.5;
		border-radius: 45rpx;
		margin-top: 91rpx;
		text-align: center;
		line-height: 94rpx;

		font-size: 32rpx;
		font-family: PingFang SC;

		font-weight: bold;
		color: #FFFFFF;
	}

	.tip {
		margin-top: 130rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		display: flex;
		justify-content: center;
		align-items: center;

		.line {
			width: 166rpx;
			height: 1px;
			background: #E5E5E5;
		}
	}

	.wixin {
		text-align: center;
		margin-top: 37rpx;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
	}

	.xieyi {
		text-align: center;
		font-size: 24rpx;
		margin-top: 60rpx;
		color: #999999;

		text {
			color: #000;
		}
	}
</style>
